<template>
	<div class="node-panel">
		<div class="node-item" v-for="item in props.nodeList" :key="item.text" @mousedown="$_dragNode(item)">
			<div class="node-item-icon ">
				<i class="iconfont" :class="item.class"></i>
				<span class="node-label">{{item.text}}</span>
			</div>
		</div>
	</div>
</template>
<script  setup lang="ts">
	import {defineComponent,reactive,toRaw} from 'vue';


	const props = defineProps<{
		nodeList: any,
		lf: any
	}>()

	const $_dragNode = (item: any) => {
		console.log(item)
		props.lf.dnd.startDrag({
			type: item.type,
			name:item.text,
		})
	}
</script>
<style lang="less" scoped>
	.node-panel {
		position: absolute;
		top: 50px;
		left: 20px;
		width: 280px;
		padding: 0px 0px 20px 20px;
		background-color: white;
		box-shadow: 0 0 10px 1px rgb(228, 224, 219);
		border-radius: 6px;
		text-align: center;
		z-index: 101;
	}

	.node-item {
		margin-top: 20px;
		margin-right: 20px;
		float: left;
	}

	.node-item-icon {
		cursor: pointer;
		width: 110px;
		height: 30px;
		background: rgba(0, 0, 0, 0.04);
		border-radius: 13px;
		text-align: left;

		.iconfont {
			display: inline-block;
			width: 30px;
			height: 30px;
			border-radius: 30px;
			background-size: cover;
			background-position: center;
			color: #ffffff;
			font-size: 18px;
			text-align: center;
			vertical-align: middle;
		}

		.icon-shenhe {
			background-color: #52C41A;
		}

		.icon-chaosong {
			background-color: #FAAD14;
		}

		.icon-fork {
			background-color: #005AEA;
		}

		.icon-view-module {
			background-color: #005AEA;
		}

		.node-start {
			background: url('../background/start.png') no-repeat;
			background-size: cover;
		}

		.node-end {
			background: url('../background/end.png') no-repeat;
			background-size: cover;
		}

	}

	.node-label {
		margin-top: 5px;
		user-select: none;
		margin-left: 10px;
	}


	.node-click {
		background: url('../background/click.png') no-repeat;
		background-size: cover;
	}
</style>
